:root {
    --color-primary: rgba(240, 232, 217, 0.5);
    --color-border-one: red;
    --color-border: #004187;
}

header, footer {
    background-color: #004187 !important;
    background-image: url("https://www.transparenttextures.com/patterns/climpek.png");
}

body {
    background-color: #f3eded;
}

div.container {
    gap: var(--gap);
    grid-template-columns: 1fr 2.5fr;
}

div.container>div {
    border: 1px solid var(--color-border);
    background-color: var(--color-primary);
    padding: var(--gap);
}

div.container>div.left>section.txtpost1 {
    grid-template-columns: auto !important;
}
div.header4>section>h1>a{
    color:white !important;
}

@media screen and (max-width: 1200px) {
    :root {
        --gap: .8rem;
    }

    div.container {
        grid-template-columns: 1fr 2fr;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --gap: .6rem;
    }

    div.container {
        grid-template-columns: auto
    }

    div.container>div.left {
        order: 2;
    }

    div.container>div.right {
        order: 1;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --gap: .5rem;
    }
}